<template>
  <scroll-view class="video-mian" scroll-y enable-flex @scrolltolower='handleToLower'>
    <view class="video-item" v-for="v in videowp" :key="v.id" @click="handleClick(v)">
      <image mode="widthFix" :src="v.img" />
    </view>
  </scroll-view>
</template>

<script>
export default {
  props: {
    urlobj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      videowp: [],
      hasMore: true,
      url: '',
      params: {}
    }
  },
  watch: {
    urlobj(val) {
      this.hasMore = true
      this.videowp = []
      this.url = val.url
      this.params = val.params
      this.loadVideoList()
    }
  },
  methods: {
    async loadVideoList() {
      const { res } = await this.request({ url: this.url, data: this.params })
      if (!res.videowp.length) {
        this.hasMore = false
        uni.showToast({ title: '没有更多数据了', icon: 'none' })
      } else {
        this.videowp.push(...res.videowp)
      }
    },
    handleToLower() {
      if (this.hasMore) {
        this.params.skip += this.params.limit
        this.loadVideoList()
      } else {
        uni.showToast({ title: '没有更多数据了', icon: 'none' })
      }
    },
    handleClick(item) {
      getApp().globalData.video = item
      uni.navigateTo({
        url: '/pages/videoPlay/index'
      })
    }
  },
  mounted() {
    this.url = this.urlobj.url
    this.params = this.urlobj.params
    this.loadVideoList()
  }
}
</script>

<style scoped>
.video-mian {
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 36px);
}
.video-item {
  width: 33.33%;
  border: 5rpx solid #fff;
}
</style>